<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <!--用户搜索-->
        <el-col :span="5">
          <el-input placeholder="请输入物品类型" :model="ProductTypeListForm" v-model="ProductTypeListForm.typeName">
            <el-button slot="append" icon="el-icon-search" @click="productTypeConditionClick(ProductTypeListForm.typeName)"></el-button>
          </el-input>
        </el-col>
        <!--添加用户-->
        <el-col :span="19" style="text-align: right;">
          <el-button type="primary" size="mini" @click="productTypeAddBtnClick()">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="productTypeList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="物品类型" prop="typeName" min-width="200"></el-table-column>
        <el-table-column label="创建日期" prop="createTime" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="productTypeEditBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="productTypeDeleteBtnClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ProductTypeListForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="ProductTypeListForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-dialog v-dialogDrag title="添加物品类型" :visible.sync="addproductTypeDialog" width="40%" center @closed="addProductTypeDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="addProductTypeFormRef" :model="addProductTypeForm" :rules="addProductTypeFormRules" label-position="right"
            label-width="80px">
            <!--权限名称-->
            <el-form-item label="物品类型" prop="typeName" v-on:keyup.enter.native="addProductType">
              <el-input v-model="addProductTypeForm.typeName"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="addProductType">提交</el-button>
          </div>
        </span>
      </el-dialog>
      <el-dialog v-dialogDrag title="编辑物品类型" :visible.sync="editProductTypeDialog" width="40%" center @closed="editProductTypeDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="editProductTypeFormRef" :model="editProductTypeForm" :rules="editProductTypeFormRules" label-position="right"
            label-width="80px">
            <!--权限名称-->
            <el-form-item label="物品类型" prop="typeName" v-on:keyup.enter.native="editProductType">
              <el-input v-model="editProductTypeForm.typeName"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="editProductType">提交</el-button>
          </div>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmManage',
  data () {
    return {
      value: '',
      addproductTypeDialog: false,
      editProductTypeDialog: false,
      total: 0,
      productTypeList: [],
      ProductTypeListForm: {
        typeName: '',
        pageNum: 1,
        pageSize: 10
      },
      addProductTypeForm: {
        typeName: ''
      },
      editProductTypeForm: {
        id: '',
        typeName: ''
      },
      addProductTypeFormRules: {
        typeName: [{
          required: true,
          message: '请输入物品类型',
          trigger: 'blur'
        }]
      },
      editProductTypeFormRules: {
        typeName: [{
          required: true,
          message: '请输入物品类型',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getProductTypeList () {
      const res = await this.$apiUtil.postByJson('productType/getproductTypeList', this.ProductTypeListForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.productTypeList = res.data.productTypeVOS
      this.total = res.data.totalSize
      console.log(this.productTypeList)
    },
    handleSizeChange (newSize) {
      this.ProductTypeListForm.pageSize = newSize
      this.getProductTypeList()
    },
    handleCurrentChange (newPage) {
      this.ProductTypeListForm.pageNum = newPage
      this.getProductTypeList()
    },
    addProductTypeDialogClosed () {
      this.$refs.addProductTypeFormRef.resetFields()
    },
    editProductTypeDialogClosed () {
      this.$refs.editProductTypeFormRef.resetFields()
    },
    productTypeConditionClick (row) {
      console.log(row)
      this.ProductTypeListForm.typeName = row
      this.getProductTypeList()
    },
    productTypeAddBtnClick () {
      this.addproductTypeDialog = true
    },
    productTypeEditBtnClick (row) {
      this.editProductTypeDialog = true
      this.editProductTypeForm.id = row.id
      this.editProductTypeForm.typeName = row.typeName
    },
    async addProductType () {
      const res = await this.$apiUtil.postByJson('productType/addProductType', this.addProductTypeForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('新增成功！')
      this.addproductTypeDialog = false
      this.getProductTypeList()
    },
    async editProductType () {
      const res = await this.$apiUtil.postByJson('productType/editProductType', this.editProductTypeForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑成功！')
      this.editProductTypeDialog = false
      this.getProductTypeList()
    },
    async productTypeDeleteBtnClick (row) {
      this.$alert('确定删除物品类型:' + row.typeName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('productType/deleteProductType', { id: row.id })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除物品类型成功')
            this.getProductTypeList()
          }
        }
      })
    }
  },
  created () {
    this.getProductTypeList()
  }
}
</script>

<style lang="less" scoped>
</style>
